import { defineComponent, ref } from "vue";
import styles from "./HeaderUserCenter.module.less";
import { useStore as useUserStore } from "@/store/user";
import { useRoute, useRouter } from "vue-router";
import { Modal } from "ant-design-vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { imgPath } from "@/common/utils";
import LoginPopup from "../LoginPopup/LoginPopup";

export default defineComponent({
  emits: ['toLogin'],
  setup(porps, { emit }) {
    const userStore = useUserStore();
    const route = useRoute();
    const router = useRouter();
    const logout = () => {
      Modal.confirm({
        title: '提示',
        content: '确认退出登陆?',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          userStore.logout();
        }
      })
    }
    //执行登录
    const tologin = () => {
      emit('toLogin');
    }
    const toHome = () => {
      router.push('/');
    }
    // 头部信息栏
    const Notice = () => (
      <div class={styles.notice}>
        <div class={styles.container}>
          <div class={[styles['container-item'], styles.clickable]} onClick={() => toHome()}>
            返回首页
          </div>
          {/* <div class={styles['container-item']}>
            7x24小时服务热线 400-855-8990
          </div> */}
          {
            userStore.token ? (
              <span class={styles['userContext']}>
                <span class={styles.warning}>您好,{userStore.user_info.username}</span>
                <span class={styles.line}>|</span>
                <span class={styles.clickable} onClick={() => logout()}>退出</span>
              </span>
            ) : (
              <span class={styles['userContext']}>
                <span class={styles.clickable} onClick={() => tologin()}>登录</span>
              </span>
            )
          }
        </div>
      </div>
    )

    const accountSettingMenu = ref([
      {
        label: '个人信息',
        path: '/account/usercent',
      },
      {
        label: '企业信息',
        path: '/account/Qyinform/EnterpriseInformation',
      },
      {
        label: '账户安全',
        path: '/account/userinfo',
      },
    ])

    const toUserCenter = () => {
      if (route.name !== 'userCenterIndex') {
        router.push('/userCenter');
      }
    }

    const toAccountSetting = (path: string) => {
      router.push(path);
    }
    // 菜单
    const Menu = () => (
      <div class={styles['menu-box']}>
        <div class={styles.menu}>
          <div class={styles['logo-box']} onClick={() => { toHome() }}>
            <img class={styles.logo} src={imgPath("/logo.png")} />
          </div>
          <div class={styles['menu-container']}>
            <div class={styles['menu-item']} onClick={() => { toHome() }}>首页</div>
            <div class={styles['menu-item']} onClick={() => { toUserCenter() }}>会员中心</div>
            <a-dropdown v-slots={{
              overlay: () => (
                <a-menu>
                  {
                    accountSettingMenu.value.map((item: any) => (
                      <a-menu-item onClick={() => { toAccountSetting(item.path) }}>
                        <div class={styles.accountSettingMenuItem}>
                          {item.label}
                        </div>
                      </a-menu-item>
                    ))
                  }
                </a-menu>
              )
            }}>
              <div class={styles['menu-item']}>账户设置<DownOutlined class={styles.icon} /></div>
            </a-dropdown>
          </div>
        </div>
      </div>
    )
    return () => (
      <div class={styles.headerUserCenter}>
        <Notice />
        <Menu />
      </div>
    )
  }
})